<template>
  <div class="hello">
    <h3>{{ title }}</h3>
    <table border="0" width="100%">
      <tr v-for="(item, index) in uid" :key="item.id" width="50%">
        <td>{{ index }}</td>
        <td>{{ item.id }}</td>
        <td>
          <button @click="select(index)">查询</button>
        </td>
      </tr>
    </table>
    <button @click="test">赋值</button>
    <button @click="resetTitle">初始化头数据</button>
    <button @click="resetTable">初始化表格数据</button>
    <button @click="reset">初始化全部</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex"
import vuexSql from "../vuex.sql"

export default {
  name: 'HelloWorld',
  computed: {
    ...mapGetters('csgo/user', ['title']),
    ...mapState('csgo/user', ['uid'])
  },
  created() {
    // 创建csgo user表
    vuexSql.run("create csgo.user").start([{
      state: {
        uid: [{
          id: "csgo"
        }, {
          id: "dota2"
        }, {
          id: "steam"
        }, {
          id: "wp"
        }],
        title: "csgo标题"
      }
    }]);
  },
  methods: {
    // 赋值
    test() {
      // 把uid对象存入user user表内
      vuexSql.run("set uid to csgo.user").start([[{
        id: 1
      }, {
        id: 2
      }, {
        id: Math.random()
      }, {
        id: Math.random()
      }]]);
      // 把 title 存入csgo user表内
      vuexSql.run("set title to csgo.user").start(["赋值set后数据"]);
    },
    // 初始化全部
    reset() {
      vuexSql.run("reset csgo.user").start()
    },
    // 初始化头数据
    resetTitle() {
      vuexSql.run("reset title from csgo.user").start()
    },
    // 初始化头数据
    resetTable() {
      vuexSql.run("reset uid from csgo.user").start()
    },
    // 查询
    async select(i) {
      // 查询
      const data = await vuexSql.run("select uid from csgo.user").start();
      alert("查询的是：" + data[0][i].id);
    },
    destroyed() {
      //  删除csgo user表
      vuexSql.run("delete csgo.user").start()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
